<template>
  <div class="layoutCon">
    <div class="checkFrm">
      <h1>비밀번호확인<span>{{role=='enterprise'?'기업정보수정':'개인정보수정'}}</span></h1>
      <el-form :model="frm" :rules="rules" ref="checkFrm">
        <el-form-item :error="error.password" prop="password">
          <el-input type="password" placeholder="비밀번호를 입력해주세요." autocomplete="off" v-model="frm.password"></el-input>
        </el-form-item>        
        <el-button type="primary" :loading="isLoading" @click="submitForm()">확인</el-button>
        <el-input class="hide"></el-input>
      </el-form>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { confirmPassword } from '@/api'
import { Local } from '@/utils'

export default {
  name:'',
  components:{},
  props:[],
  data(){
    return {
      isLoading:false,
      frm:{
        password:''
      },
      error:{
        password:''
      },
      rules:{
        password:[
          { required: true, message: '비밀번호를 입력해 주세요', trigger: 'blur' }
        ]
      }
    }
  },
  computed:{
    ...mapState(['role'])
  },
  created(){
  },
  mounted(){},
  methods:{
    submitForm(){
      this.$refs['checkFrm'].validate( async (valid,error) => {
        if (valid) {
          this.isLoading=true;
          let res = await confirmPassword(this.frm);
              if(res.code==200){
                this.isLoading=false;
                let _safeTime=(new Date()).valueOf() + 5*60*1000;
                Local.set('safeTime',_safeTime)
                if(this.role=='personal'){
                  this.$router.replace('/my/personal')
                }else{
                  this.$router.replace('/my/enterprise')
                }
              }else{
                this.isLoading=false;
                this.error.password = Math.random()+'';
                this.$nextTick(() => {
                  this.error.password='잘못된 비밀번호를 입력하였습니다';
                });
              }
        } else {
          this.isLoading=false;
          return false;
        }
      });
    }
  },
  watch:{}
}
</script>
<style lang="scss" scoped>
 @import "@/assets/styles/my.scss";
</style>